<template>
  <div class="shezhi">
    <div class="top">
    <div class="nav-top">
      <van-nav-bar title="设置" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="fixde-nav">
      <div class="top-img">
        <img
          class="auto-img"
          src="https://p2.qhimg.com/t013dd875d303717d58.png"
          alt=""
        />
        <div class="top-img-content">
          <div class="top-title">
            <div class="title-img">
              <img
                class="auto-img"
                src="	https://p1.ssl.qhmsg.com/dm/48_48_100/t01923d359dad425928.jpg"
                alt=""
              />
            </div>
            <div class="title-content">
              <div class="title-number">
                <div class="number">12345678789998</div>
                <div class="title-name">
                  <div class="name-img">
                    <img
                      class="auto-img"
                      src="https://p1.ssl.qhimg.com/t01281d7cacc3c8b2e2.png"
                      alt=""
                    />
                  </div>
                  <div class="name-title">青铜</div>
                </div>
              </div>
              <div class="title-footer">
                <div class="footer-jifen">积分222 ></div>
                <div class="footer-changzhang">成长值100 ></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="huiyuan">
        <div class="hui-title">
            <div class="hui-rop">360黑金会员</div>
            <div class="hui-white">开通黑金会员免费送智能设备</div>
        </div>
        <div class="current-title">立即开通</div>
       </div>
    </div>

    <div class="aaa"></div>

       <div class="midden-box">
        <div class="name-content">
            <div class="wenzhi">意见反馈</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">关于我们</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">七天无理由退货</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">质量问题15天换货</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">保修条款</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">许可协议</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">客服电话:400-6822-360</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">意见反馈</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi" @click="deteleData">退出登录</div>
            <div class="right">></div>
        </div>
        <div class="name-content">
            <div class="wenzhi">注销账号</div>
            <div class="right">></div>
        </div>
       </div>
  </div>
</template>

<script>
export default {
  name: "Shezhi",
  methods: {
    onClickLeft() {
      this.$router.push({ name: "My" });
    },

    deteleData(){
        // 删除本地
        window.localStorage.removeItem("SigInID");
        this.$toast("正在退出登录")
        setTimeout(() => {
          
          this.$router.push({name:"SignIn"})
        }, 500);

    }
  },
};
</script>

<style lang="scss" scoped>
.aaa{
    width: 100%;
    height: 220px;
}
.top{
    position: fixed;
    width: 100%;
    
}
.midden-box{
    width: 96%;
    border-radius: 10px;
    background-color: white;
    margin: 55px auto;
    .name-content{
    display: flex;
    padding: 0 10px;
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    font-family: "宋体";
    border-bottom: 1px solid rgb(228, 228, 228);
    .right{
        margin-left: auto;
    }
    }
}
.shezhi {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  background-color: #f6f6f7;
}


.MyOrder {
  width: 95%;
  height: 120px;
  margin: 10px auto;
  border: 1px solid rgb(217, 217, 217);
  border-radius: 10px;
  background-color: white;
  overflow: hidden;
}
.current-title {
  color: white;
  text-align: center;
  line-height: 25px;
  background-color: #eebd6b;
  border-radius: 15px;
  width: 80px;
  height: 25px;
  font-size: 16px;
  margin-left: auto;
}
.hui-white {
  color: #ae9bb5;
  margin-top: 5px;
}
.hui-rop {
  color: #eebd6b;
  font-size: 16px;
}
.huiyuan {
  display: flex;
  border-radius: 10px;
  background-color: #4d3d54;
  height: 85px;
  width: 95%;
  margin: 0 auto;
  position: fixed;
  top: 180px;
  left: 9px;
  padding: 10px 15px;
  box-sizing: border-box;
}
.footer-jifen,
.footer-changzhang {
  margin-right: 10px;
  padding: 0 10px;
  background-color: #98325a;
  color: white;
  border-radius: 10px;
}
.title-footer {
  margin-top: 5px;
}
.name-img {
  width: 20px;
  height: 20px;
}
.name-title {
  color: white;
}
.number {
  font-size: 20px;
  color: white;
  margin-top: 5px;
}
.title-content {
  margin-left: 10px;
}
.title-footer {
  display: flex;
}
.title-name {
  display: flex;
  margin-left: 5px;
  height: 16px;
  margin-top: 8px;
  line-height: 16px;
}
.title-number {
  display: flex;
}
.top-title {
  margin-top: 20px;
}
.title-img {
  width: 53px;
  height: 53px;
  border: 1px solid #ffff;
  margin-left: 20px;
  border-radius: 50%;
  overflow: hidden;
}
.top-title {
  display: flex;
}
.setup {
  width: 20px;
  height: 20px;
  margin-left: 93%;
}
.top-img-content {
  height: 100px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  position: absolute;
  top: 5px;
}
.top-img {
  position: relative;
  margin-bottom: 50px;
}
* {
  padding: 0;
  margin: 0;
}
</style>